<template>
    <div class="chat-layout">
        <!-- 顶部栏 -->
        <header class="chat-header">
            <div class="user-info">
                <el-avatar :size="40" src="用户头像URL" />
                <span>{{ username }}</span>
            </div>
            <el-button size="small" @click="logout">退出</el-button>
        </header>

        <!-- 左侧导航 + 主内容 -->
        <div class="chat-body">
            <!-- 左侧菜单 -->
            <div class="sidebar">
                <el-menu default-active="/chatlayout/conversation" router>
                    <el-menu-item index="/chatlayout/conversation">
                        <el-icon>
                            <ChatLineSquare />
                        </el-icon>
                        <span>消息</span>
                    </el-menu-item>
                    <el-menu-item index="/chatlayout/friend">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>联系人</span>
                    </el-menu-item>
                    <el-menu-item index="/chatlayout/chatwindow">
                        <el-icon>
                            <MessageBox />
                        </el-icon>
                        <span>聊天窗口</span>
                    </el-menu-item>
                </el-menu>
            </div>

            <!-- 右侧内容区 -->
            <div class="main-content">
                <!-- 🚀 关键：给 router-view 加上 max-width 和居中 -->
                <div class="content-wrapper">
                    <router-view />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username: localStorage.getItem('username') || '用户'
        };
    },
    methods: {
        logout() {
            localStorage.removeItem('token');
            this.$router.push('/');
        }
    }
};
</script>

<style scoped>
.chat-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f5f6f8;
}

.chat-header {
    height: 60px;
    background: #fff;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* ✅ 关键：这个容器必须是 flex 布局 */
.chat-body {
    display: flex;
    /* 👈 加上这一行 */
    flex: 1;
    /* 占满剩余高度 */
    overflow: hidden;
    /* 防止滚动影响布局 */
}

.sidebar {
    width: 220px;
    background: #fff;
    border-right: 1px solid #eaeaea;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

.main-content {
    flex: 1;
    overflow: auto;
    background: #f9f9f9;
    padding: 20px;
    /* 给主内容区留边距 */
}

/* ✅ 新增：包裹 router-view 的容器，限制宽度并居中 */
.content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 20px;
}
</style>